<template>
    <el-aside width="95px">
        <ul  class="menu">
            <li v-for="item in getMenuList" :key="item.id" @click="menuListChange(item.url)">
                <div :class="{active:item.url=== $route.path  }">
                    <i style="" class="iconfont " :class="item.ico"></i>
                    <div class="menuName">{{ item.name}}</div>
                </div>
            </li>
        </ul>
    </el-aside>

</template>
<script>

import { mapState, mapGetters } from "vuex";
export default {
  name: "MenuList",
  data() {
    return {
      list: [
        {
          icon: "",
        },  
      ],
    };
  },

  methods: {
    menuListChange(router) {
      this.$route.fullPath !== router && this.$router.push(router);
    },
  },
  computed: {
    ...mapGetters({ getMenuList: "menu/getMenuList" }),
  },
};
</script>
<style lang="less" scoped>
.el-aside {
    background: #f4f4f4;
    .menu {
        margin-top: 23px;
        overflow: hidden;
        li {
            list-style: none;
            position: relative;
            padding:  0 27px;
            margin-bottom:25px;
            cursor: pointer;

            >div {
                font-size: 14px;
                &.bottomLi{
                    padding-bottom:  20px;
                    border-bottom: 1px solid #e5e5e5;
                }
                &.active{

                    &::before {
                        content: '';
                        display: block;
                        width: 5px;
                        height: 60px;
                        background: #2981ff;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    i {
                        color: #4180f3;
                    }
                }
                i {
                    font-size: 30px;
                    color: #727e97;
                    &.icon-shouye-shouye {
                        font-size: 28px;
                        
                    }
                    &.icon-shouye-shouye {
                        font-size: 28px;
                        
                    }
                    &.icon-wodefangwu {
                        font-size: 36px
                    }
                    &.icon-wuyeguanli{
                        font-size: 42px
                    }
                }
                div {
                    margin-top: 10px;
                }
            }

        }
        &.active {
          &::before {
            content: "";
            display: block;
            width: 5px;
            height: 60px;
            background: #2981ff;
            position: absolute;
            left: 0;
            top: 0;
          }
          i {
            color: #4180f3;
          }
        }
        i {
          font-size: 30px;
          color: #727e97;
          &.icon-shouye-shouye {
            font-size: 28px;
          }
          &.icon-wodefangwu {
            font-size: 36px;
          }
          &.icon-wuyeguanli {
            font-size: 42px;
          }
        }
        div {
          margin-top: 10px;
        }
    
  }
}
</style>